<!DOCTYPE html>
<html lang="en">

<head>
    <title>WebGL 2 Samples - glsl_flat_smooth_interpolators</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="info">WebGL 2 Samples - glsl_flat_smooth_interpolators</div>
    <p id="description">
        LEFT: flat interpolator / RIGHT: smooth interpolator
    </p>

    <script id="vs-smooth" type="x-shader/x-vertex">
        #version 300 es
        #define POSITION_LOCATION 0
        #define NORMAL_LOCATION 1

        precision highp float;
        precision highp int;

        uniform mat4 mvp;
        uniform mat4 mvNormal;

        layout(location = POSITION_LOCATION) in vec3 position;
        layout(location = NORMAL_LOCATION) in vec3 normal;

        out vec3 v_normal;

        void main()
        {
            v_normal = normalize((mvNormal * vec4(normal, 0)).xyz);
            gl_Position = mvp * vec4(position, 1.0) ;
        }
    </script>

    <script id="fs-smooth" type="x-shader/x-fragment">
        #version 300 es
        #define FRAG_COLOR_LOCATION 0

        precision highp float;
        precision highp int;

        in vec3 v_normal;

        layout(location = FRAG_COLOR_LOCATION) out vec4 color;

        void main()
        {
            color = vec4(v_normal, 1.0);
        }
    </script>

    <script id="vs-flat" type="x-shader/x-vertex">
        #version 300 es
        #define POSITION_LOCATION 0
        #define NORMAL_LOCATION 1

        precision highp float;
        precision highp int;

        uniform mat4 mvp;
        uniform mat4 mvNormal;

        layout(location = POSITION_LOCATION) in vec3 position;
        layout(location = NORMAL_LOCATION) in vec3 normal;

        flat out vec3 v_normal;

        void main()
        {
            v_normal = normalize((mvNormal * vec4(normal, 0)).xyz);
            gl_Position = mvp * vec4(position, 1.0) ;
        }
    </script>

    <script id="fs-flat" type="x-shader/x-fragment">
        #version 300 es
        #define FRAG_COLOR_LOCATION 0

        precision highp float;
        precision highp int;

        flat in vec3 v_normal;

        layout(location = FRAG_COLOR_LOCATION) out vec4 color;

        void main()
        {
            color = vec4(v_normal, 1.0);
        }
    </script>

    <script type="module" src="./glsl_flat_smooth_interpolators.ts">
    </script>
    <div id="highlightedLines"  style="display: none">#L74</div>
</body>

</html>
